import { Link, NavLink, Outlet, useLocation } from "react-router-dom";
import "./home.css"
import {
    CopyOutlined,
    TeamOutlined,
    SettingOutlined,
    FormOutlined,
    PieChartOutlined,
    UserOutlined,
    HomeOutlined,
    AppstoreOutlined
} from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';
import React, { useState } from 'react';
import UserLink from "../../components/UserLink";
const { Header, Content, Footer, Sider } = Layout;

function getItem(label, key, icon, children) {
    return {
        key,
        icon,
        children,
        label,
    };
}
const items = [
    getItem(<NavLink to="/home">首页</NavLink>, '1', <HomeOutlined />),
    getItem("系统设置", 'sub1', <SettingOutlined />, [
        getItem(<NavLink to="/home/system/menu">菜单管理</NavLink>, '2'),
        getItem(<NavLink to="/home/system/modify">修改密码</NavLink>, '3'),
    ]),
    getItem("权限设置", 'sub2', <UserOutlined />, [
        getItem(<NavLink to="/home/limits/role">角色管理</NavLink>, '4'),
        getItem(<NavLink to="/home/limits/user">用户管理</NavLink>, '5'),
        getItem(<NavLink to="/home/limits/dept">部门管理</NavLink>, '6'),
    ]),
    getItem("公共信息", 'sub3', <CopyOutlined />, [
        getItem(<NavLink to="/home/common/info">信息管理</NavLink>, '7'),
    ]),
    getItem("个人办公", 'sub4', <FormOutlined />, [
        getItem(<NavLink to="/home/my/note">我的便签</NavLink>, '8'),
        getItem(<NavLink to="/home/my/task">我的任务</NavLink>, '9'),
    ]),
    getItem("人事管理", 'sub5', <TeamOutlined />, [
        getItem(<NavLink to="/home/personnel/staffInfo">员工信息管理</NavLink>, '10'),
        getItem(<NavLink to="/home/personnel/attendanceRecord">考勤记录管理</NavLink>, '11'),
    ]),
    getItem(<NavLink to="/home/visualizing">数据展示</NavLink>, '13', <PieChartOutlined />),
];
const breadcrumbNameMap = {
    '/home': 'Home',
    '/home/system/menu': 'Menu',
    '/home/system/modify': 'Modify',
    '/home/limits/role': 'Role',
    '/home/limits/user': 'User',
    '/home/limits/dept': 'Dept',
    '/home/common/info': 'Info',
    '/home/my/note': 'Note',
    '/home/my/task': 'Task',
    '/home/personnel/staffInfo': 'StaffInfo',
    '/home/personnel/attendanceRecord': 'AttendanceRecord',
    '/home/visualizing': 'Visualizing'
};

function Home() {
    const [collapsed, setCollapsed] = useState(false);
    const [flag, setFlag] = useState(null);
    const handleColor = (bool) => {
        setFlag(bool);
    }
    const location = useLocation();
    let pathSnippets = location.pathname.split('/').filter((i) => i);
    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
        if (pathSnippets.length === 3) {
            if (index !== 1) {
                const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
                return (
                    <Breadcrumb.Item key={url}>
                        <Link to={url}>{breadcrumbNameMap[url]}</Link>
                    </Breadcrumb.Item>
                );
            }
        } else {
            const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
            return (
                <Breadcrumb.Item key={url}>
                    <Link to={url}>{breadcrumbNameMap[url]}</Link>
                </Breadcrumb.Item>
            );
        }
    });
    const breadcrumbItems = [
        // <Breadcrumb.Item key="home">
        //     <Link to="/">Home</Link>
        // </Breadcrumb.Item>,
    ].concat(extraBreadcrumbItems);
    return (
        <Layout
            style={{
                minHeight: '100vh',
                overflow: "hidden"
            }}
        >
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <div className="logo">{collapsed?<AppstoreOutlined style={{fontSize:16}} />:"OA管理系统"}</div>
                <Menu theme={flag ? "light" : "dark"} style={{ height: "inherit" }} defaultSelectedKeys={['1']} mode="inline" items={items} />
            </Sider>
            <Layout className="site-layout">
                <Header
                    className="site-layout-background"
                    style={{
                        padding: 0,
                        textAlign: "right"
                    }}
                >
                    <UserLink handleColor={handleColor} />
                </Header>
                <Content
                    style={{
                        margin: '0 16px',
                    }}
                >
                    <Breadcrumb
                        style={{
                            margin: '6px 0',
                        }}
                    >
                        {breadcrumbItems}
                    </Breadcrumb>
                    <div
                        className="site-layout-background"
                        style={{
                            padding: 24,
                            minHeight: 550,
                        }}
                    >
                        <Outlet />
                    </div>
                </Content>
                <Footer
                    style={{
                        textAlign: 'center',
                        padding: '8px 50px'
                    }}
                >
                    Ant Design ©2018 Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );

}

export default Home